<template>
  <el-drawer
    direction="rtl"
    v-model:visible="isShowDialog"
    @close="handleBtnClick({ type: 'close' })" v-model="isShowDialog" :size="px2vw('842px')">
    <template #header>
      <div class="flex-center font-bold pl-[12px]">新增模板</div>
    </template>

    <div class="pl-[12px]">
      <el-form :model="form" :rules="rules" label-width="85px">
        <el-row :gutter="24">
          <el-col
            v-for="(item,index) in config"
            :key="index"
            :span="item.col"
          >
            <el-form-item :prop="item.code" :label="item.name">
              <el-input
                v-model="form[item.code]"
                v-if="!item.type || item.type == 'text'"
              />

              <el-select v-if="item.type == 'select'"
                         v-model="form[item.code]"
              >
                <el-option v-for="(it,idx) in 3" :key="idx" :label="it" :value="it"/>
              </el-select>

              <el-input type="textarea"
                        v-if="item.type == 'textarea'"
                        :rows="10"
                        v-model="form[item.code]"
              />
            </el-form-item>

          </el-col>
        </el-row>


        <el-form-item label="插入变量">

          <div class="text-[14px] w-[100%]">
            已选：<span class="text-[#3721FF] text-[14px]">2</span><span
            class="text-[#999999] text-[14px]">/10</span> <span
            class="ml-[10px] text-[#999999] text-[14px]">全不选</span>
          </div>

          <div class="w-[100%] flex flex-wrap">
            <div v-for="(item,index) in messageConfig" :key="index"
                 class="px-[14px] py-[10px] rounded-[8px] badget flex items-center mr-[14px]"
                 :class="index == 0 ? 'active' : ''"
            >

              <div class="bg w-[14px] h-[14px] mr-[8px]"
                   :style="`background-image:url(${ index == 0 ? 'https://img.alicdn.com/imgextra/i1/801089336/O1CN01VnPBVV2IpwkA5gUrJ_!!801089336.png' : 'https://img.alicdn.com/imgextra/i3/801089336/O1CN01GDnuIN2IpwkAPDtSq_!!801089336.png' })`"></div>

              {{ item.name }}

            </div>
          </div>
          <div class="mt-[30px] rounded-[8px] bg-[#FAFAFC] px-[24px] py-[24px] w-[100%]">
              <div class="title flex items-center"> <div class="w-[5px] h-[5px] bg-[#3721FF] rounded-[5px] mr-[8px]"></div> 变量会替换成实现业务信息：</div>

            <div class="text-[12px] color-[#999999] mt-[10px]">
              1.姓名为用户下单填写的姓名

            </div>

            <div class="text-[12px] color-[#999999] mt-[5px]">
              2.短信标题读取客户下单关联商品填写的短信标题
            </div>
          </div>

        </el-form-item>

      </el-form>
    </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClick({ type: 'close' })">取 消</el-button>

        <el-button type="primary" @click="handleBtnClick({ type: 'close' })">确 定</el-button>

      </div>
    </template>

  </el-drawer>
</template>
<script setup lang="ts">
import {listToMap, px2vw} from "@/utils";
import QueryTable from "@/components/TableData/index.vue"
import Icon from "@/components/Icon/src/Icon.vue";
import ImagePreview from "@/components/ImagePreview/index.vue"
import {confirmPromote} from "@/utils";


const props = defineProps({
  modelValue: {
    type: Boolean,
    required: false,
    default: () => false
  },
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  }
})

const emit = defineEmits(['update:modelValue', 'confirm']);

const isShowDialog = ref(false);

const config = ref([
  {
    col: 24,
    name: "模板名称",
    code: "name"
  },
  {
    col: 12,
    name: "地区",
    code: "area",
    type: "select"
  },
  {
    col: 12,
    name: "模板类型",
    code: "type",
    type: "select"
  },
  {
    col: 24,
    name: "模板内容",
    code: "content",
    type: "textarea"
  }
])

const messageConfig = ref([
  {
    name: "%姓名%",
    code: "name"
  },
  {
    name: "%短信标题%",
    code: "title"
  },
  {
    name: "%地址%",
    code: "address"
  },
  {
    name: "%订单号%",
    code: "orderNo"
  },
  {
    name: "%物流单号%",
    code: "expressNo"
  },
  {
    name: "%商超%",
    code: "super"
  },
  {
    name: "%价格单价%",
    code: "price"
  },
  {
    name: "%line%",
    code: "line"
  },
  {
    name: "%WhatsApp%",
    code: "WhatsApp"
  },
  {
    name: "%联系电话%",
    code: "phonenumber"
  },
  {
    name: "%message%",
    code: "message"
  },
  {
    name: "%邮箱%",
    code: "email"
  }
])

const rules = computed(() => {
  let map = listToMap(config.value, 'code');
  for (let i in map) {
    map[i] = [{required: true, message: `请选择${map[i].name}`, trigger: 'change'}]
  }
  return map
})

const form = ref({})


const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }

}

const fn = {
  add({index}) {
    dataList.value[index].list.push({
      link: "",
      remark: "",
      isEdit: true
    })
  },
  async delItem({index, idx}) {
    await confirmPromote({
      content: "是否删除该采购链接？"
    })
    dataList.value[index].list.splice(idx, 1);
  },
  close() {

    emit('update:modelValue', false)
  },
  confirm() {
    fn.close();
    emit('confirm', {
      type: 'purchaseConfirm', data: {
        dataList: dataList.value,
        info: props.info
      }
    })
  }
}

watch(() => props.modelValue, () => {
  isShowDialog.value = props.modelValue;
})

</script>
<style lang="scss" scoped>
.badget{
  background: #FAFAFA;

  &.active{
    background:rgba(55,33,255,0.05);
  }
}
</style>
